<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="tpl :: common_head()"></th:block>
	<link rel="stylesheet" type="text/css" href="../../assets/libs/singleFileUpload/pictureUpload.css" />
	<script type="text/javascript" src="../../assets/libs/webuploader/webuploader.min.js"></script>
	<script src="../../assets/libs/singleFileUpload/pictureUpload.js"></script>
	<title>轮播图编辑</title>
</head>
<style>
	#uploader .statusBar .btns .webuploader-pick {
			display: none;
	}
	.webuploader-element-invisible{display:none}	
</style>
<body th:object="${obj}" th:with="entrance='/system/article/index'">
	<th:block th:replace="tpl :: common_body(~{::.main-right})">
		<div class="main-right">
			<h1 class="main-right-h1">轮播图管理</h1>
			<ul class="main-right-tab">
				<li><a href="index">轮播列表</a></li>
				<li class="selected" th:if="*{id==null}">新增轮播</li>
				<li class="selected" th:if="*{id!=null}">编辑轮播</li>
			</ul>
			<form class="form" method="POST"  onsubmit="return check()">
				<fieldset>
					<legend>轮播图信息</legend>
					<dl>
						<dt>类别</dt>
						<dd>
							<select class="js-example-basic-single" th:field="*{categoryId}">
								<option th:each="op:*{@dictMapper.getByType('ArticleType')}" th:value="${op.value}" th:text="${op.label}"></option>
					        </select>
						</dd>
						<dt>标题</dt>
						<dd>
							<input type="text" th:field="*{title}" data-verify="required(1)" />
						</dd>
						<dt>链接</dt>
						<dd>
							<input type="text" th:field="*{linkUrl}" />
						</dd>
						<dt>排序</dt>
						<dd>
							<input type="text" th:field="*{sort}" data-verify="int(1,10000)"/>
						</dd>
						<dt>图片地址</dt>
						<dd>
							<input id="hiddenInput" readonly="readonly" name="fileNames" type="text" th:field="*{imgUrl}" placeholder="请上传图片填入地址！" data-verify="required(1)"/>
						</dd>
						<dd>
							<span style="color:red">图片地址不可填入，请通过上传图片进行编辑！</span>
						</dd>
						<dt>轮播图</dt>
						<dd th:if="*{imgUrl}=='' or *{imgUrl}==null">
							<div id="uploader">
								<div class="queueList">
									<div id="dndArea" class="placeholder">
										<div id="filePicker"></div>
									</div>
									<ul class="filelist">
									</ul>
								</div>
								<div class="statusBar" style="display:none;">
									<div class="progress">
										<span class="text">0%</span>
										<span class="percentage"></span>
									</div>
									<div class="info_del"></div>
									<div class="btns">
										<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
									</div>
								</div>
							</div>
							<span>建议轮播图尺寸比例：<span style="color: red">  宽：高/2：1</span></span>
						</dd>
						<dd th:if="*{imgUrl}!='' and *{imgUrl}!=null ">
							<div id="uploader" class="uploaderClass">
								<div class="queueList filled">
									<ul class="oldFileList">
										<li class="state-complete">
											<p class="imgWrap">
												<img th:src="*{@imageService.getImageBasePath()+imgUrl}" style="width:110px;height:110px" onmouseover="show(this)"/>
											</p>
											<div class="file-panel" th:id="'delete_'+*{id}" onmouseleave="hide(this)">
												<span class="cancel" th:onclick="'delectFileByName(\''+*{imgUrl}+'\',this)'">删除</span>
											</div>
											<span class="success"></span>
											<input type="hidden" class="hiddenInput" name="fileNames" th:value="*{imgUrl}"/>
										</li>
									</ul>
									<ul class="filelist">
									</ul>
								</div>
								<div class="statusBar">
									<div class="progress">
										<span class="text">0%</span>
										<span class="percentage"></span>
									</div>
									<div class="info_del"></div>
									<div class="btns">
										<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
									</div>
								</div>
							</div>
							<span>建议轮播图尺寸比例：<span style="color: red">  宽：高/2：1</span></span>
						</dd>
					</dl>
				</fieldset>
				<input type="submit" value="保存修改" />
			</form>
		</div>
	</th:block>
	<script>
		var serverUrl = '../../system/article/uploadBannerImage';
	    function delectFileByName(image,obj){
	        layer.alert("确定删除该图片？", {
	            time: 0 //不自动关闭
	            ,btn: ['确定', '取消']
	            ,yes: function(index){
	                layer.close(index);
	                obj.parentNode.parentNode.remove();
	                $(".uploaderClass").empty();
	                $("#hiddenInput").val('');
	                var html ="<div class=\'queueList\'><div id=\'dndArea\'class=\'placeholder\'><div id=\'filePicker\'></div></div><ul class=\'filelist\'></ul></div><div class=\'statusBar\'style=\'display:none;\'><div class=\'progress\'><span class=\'text\'>0%</span><span class=\'percentage\'></span></div><div class=\'info\'></div><div class=\'btns\'><div id=\'filePicker2\'></div><div class=\'uploadBtn\'>开始上传</div></div></div>";
	                $(".uploaderClass").html(html);
	                $.getScript("../../assets/libs/singleFileUpload/pictureUpload.js");
	            }
	       	 });
	    	}
	</script>
</body>
</html>